<template>
	<view class="coupon">
		<view class="left">
			<view class="shang">
				{{item.amount}}
			</view>
			
			<view class="xia" v-if="item.couponStartAmount == 0">
				无门槛
			</view>
			
			<view class="xia" v-if="item.couponStartAmount > 0">
				满{{item.couponStartAmount}}可用
			</view>
		</view>
		
		<view class="zhong">
			<view class="shang">
				全场可用
			</view>
			
			<view class="xia">
				{{formatTimestamp(item.endTime,"yyyy.MM.dd")}}到期
			</view>
		</view>
		<view class="line">
			
		</view>
		<view class="right">
			<view class="shang">
				<slot name="shang"></slot>
			</view>
			
			<view class="xia">
				<slot name="xia"></slot>
			</view>
		</view>
	</view>
</template>

<script setup>
import {formatTimestamp} from "../../utils/common.js";
	defineProps({
		item:{
			type:Object,
			default(){
				return{
					
				}
			}
		}
		
	})
</script>

<style lang='scss' scoped>
	.coupon{
		height:120rpx;
		display: flex;
		justify-content: space-around;
		font-size:24rpx;
		color:#fff;
		border-radius: 10rpx;
		margin: 15rpx 0;
		.left{
			height: 120rpx;
			width: 200rpx;
			background: $xx-color-body;
			border-radius: 15rpx 0 0 15rpx;
			padding: 20rpx;
			.shang{
				font-size: 32rpx;
				font-weight: 600;
				color: red;
			}
		}
		
		.zhong{
			border-radius: 0 15rpx 15rpx 0;
			height: 120rpx;
			width: 340rpx;
			background: $xx-color-body;
			padding: 20rpx;
			.shang{
				font-size: 32rpx;
				color:black;
				font-weight: 600;
				color: red;
			}
			border-right: 1px dashed #fff; /* 虚线颜色和宽度 */
		}
		
	
		
		.right{
			height: 120rpx;
			width: 190rpx;
			background: $xx-color-body;
			border-radius: 15rpx;
			padding: 20rpx;
		
		}
	}    
</style>